<template>
    <div class="item">
        <div class="item-left">
            <input type="checkbox" v-model="isComptete">
            <span>{{ todo?.title }}</span>
        </div>
        <button @click="delTodo">删除</button>
    </div>
</template>
<script lang='ts'>
import { computed, defineComponent } from 'vue'
import { ToDo } from '@/types/todos'
export default defineComponent({
    name: 'MyItem',
    props: {
        todo: {
            type: Object as () => ToDo,  //函数返回的是ToDo类型(将本身的对象类型强转成ToDo类型)
            required: true
        },
        deleteTodo: {
            type: Function,
            required: true
        },
        index:{
            type:Number,
            required: true
        },
        updateTodo:{
            type:Function,
            required: true
        }
    },
    setup(props){
        // 删除数据的方法
        const delTodo =()=>{
            //提示
            if(window.confirm('确定要删除吗?')){
                props.deleteTodo(props.index)
            }
        }
        // 计算属性的方式---来让当前的复选框选中/不选中
        const isComptete = computed({
            get(){
                return props.todo.isCompleted
            },
            set(val){
                // todo对象中
                props.updateTodo(props.todo,val)
            }
        })
        return{
            delTodo,
            isComptete
        }
    }
    
})
</script>
<style scoped lang="scss">
.item {
    width: 90%;
    height: 30px;
    background-color: blanchedalmond;
    border: 1px solid black;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .item-left {
        display: flex;
        align-items: center;
    }
}
</style>